<template>
	<com-popup direction="top" :duration="200" :visible="visible" @hide="hide" :mask-show="false">
		<view class="com-notify y-flex">
			<view :style="{height: (top + 20 + unitpixel(offset)) + 'px'}"></view>
			<view class="com-notify-content y-flex y-row y-align-center" :style="{
				'background-color': optionsSync.bgColor,
				'border-radius': pixelunit(optionsSync.radius),
				'border-width': '1px',
				'border-style': 'solid',
				'border-color': optionsSync.color
			}">
				<slot name="icon" v-if="icon">
					<com-icon style="margin-right: 20rpx;" :name="icon" :size="(unitpixel(optionsSync.size) * 1.5) + 'px'" :color="optionsSync.color"></com-icon>
				</slot>
				<com-text class="y-flex-1" :size="optionsSync.size" :color="optionsSync.color" :value="message" />
			</view>
		</view>
	</com-popup>
</template>

<script>
	export default {
		data () {
			return {
				visible: false,
				message: '',
				duration: 0,
				type: '',
				icon: '',
				options: {},
				top: 0,
				offset: 0
			}
		},
		computed: {
			optionsSync () {
				return Object.assign({}, {
					bgColor: this.type == 'success' ? '#f0f9eb' : this.type == 'fail' ? '#fef0f0' : this.type == 'warning' ? '#fdf6ec' : '#edf2fc',
					color: this.type == 'success' ? '#67c23a' : this.type == 'fail' ? '#f56c6c' : this.type == 'warning' ? '#e6a23c' : '#909399',
					radius: '5rpx',
					size: '32rpx'
				}, this.options)
			}
		},
		beforeDestroy() {
			if ( this.notifyTimer ) {
				clearTimeout(this.notifyTimer)
				this.notifyTimer = null
			}
		},
		mounted() {
			uni.getSystemInfo({
				success: (res) => {
					// #ifndef H5
					this.top = res.safeArea.top
					// #endif
					// #ifdef H5
					this.top = res.windowTop
					// #endif
				}
			})
		},
		methods: {
			hide () {
				if ( this.notifyTimer ) {
					clearTimeout(this.notifyTimer)
					this.notifyTimer = null
				}
				this.visible = false
			},
			show ({message, duration, offset, success, fail}) {
				if ( this.notifyTimer ) {
					clearTimeout(this.notifyTimer)
					this.notifyTimer = null
				}
				this.message = message || ''
				this.duration = duration || 2000
				this.offset = offset || 0
				this.visible = true
				this.notifyTimer = setTimeout(() => {
					this.visible = false
					clearTimeout(this.notifyTimer)
					this.notifyTimer = null
				}, this.duration)
			},
			info (data = {}) {
				this.type = 'info'
				this.icon = 'info'
				this.show(this.typeof(data) == 'String' ? {message: data} : data)
			},
			success (data = {}) {
				this.type = 'success'
				this.icon = 'round_check_fill'
				this.show(this.typeof(data) == 'String' ? {message: data} : data)
			},
			fail (data = {}) {
				this.type = 'fail'
				this.icon = 'round_close_fill'
				this.show(this.typeof(data) == 'String' ? {message: data} : data)
			},
			warning (data = {}) {
				this.type = 'warning'
				this.icon = 'warn_fill'
				this.show(this.typeof(data) == 'String' ? {message: data} : data)
			},
			typeof (value) {
				let type = Object.prototype.toString.call(value);
				return type.slice(8, type.length - 1)
			},
			pixelunit (size) {
				const text = size.toString()
				return text.indexOf('px') > -1 ? text : text + 'rpx'
			},
			unitpixel (size) {
				const text = size.toString()
				return text.indexOf('rpx') > -1 ? uni.upx2px(text.replace('rpx', '')) : text.indexOf('px') > -1 ? parseFloat(text.replace('px', '')) : uni.upx2px(text)
			}
		}
	}
</script>

<style scoped>
	.com-notify-content {
		padding: 20rpx 30rpx;
		margin: 0 20rpx;
	}
</style>